<template>
	<view class="body">
		<xk-header title="车辆信息详情"></xk-header>
		<view class="util-bar">
			<view class="estate-box">
				<u-row customStyle="margin-bottom:15px">
					<u-col span="12"><view class="danhao-text">车辆编号：{{info.vehicle_no}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">管理员:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.people_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">车辆名称:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.vehicle_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">车型:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.vehicle_model}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">车牌号:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.vehicle_number}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">管理部门:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.dept_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">资产所属部门:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.assets_dept_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">所属公司:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.company_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">黑名单:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.black_list}}</view></u-col>
				</u-row>
				
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">保险登记状态:</view></u-col>
					<u-col span="7">
						<view v-if="info.insurance_det_status==0" class="color-text-4">未保养</view>
						<view v-else class="color-text-3">已保养</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">预约状态:</view></u-col>
					<u-col span="7">
						<view v-if="info.reserve_status==0" class="color-text-1">可预约</view>
						<view v-else class="color-text-4">不可预约</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">车辆类型:</view></u-col>
					<u-col span="7">
						<view v-if="info.is_visit_vehicle==0||info.is_visit_vehicle==null" class="color-text-2">白名单</view>
						<view v-if="info.is_visit_vehicle==1" class="color-text-3">固定车</view>
						<view v-if="info.is_visit_vehicle==2" class="color-text-4">访客车</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-top:15px;margin-bottom:15px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:15px 0 15px 0;">
					<u-col span="5"><view class="grey-text">油卡充值记录:</view></u-col>
					<u-col span="7"><view class="black-text" @click="oilcardOpen(info.oilcard_records)" style="text-align: right;"><u-icon label="查看清单" labelColor="#0660FF" labelPos="left" name="arrow-right"></u-icon></view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:15px;border-bottom:1px solid #ccc;padding:0px 0 15px 0;">
					<u-col span="5"><view class="grey-text">车辆预约记录:</view></u-col>
					<u-col span="7"><view class="black-text" @click="vehicleOpen(info.vehicle_records)" style="text-align: right;"><u-icon label="查看清单" labelColor="#0660FF" labelPos="left" name="arrow-right"></u-icon></view></u-col>
				</u-row>
				
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">维修保养状态:</view></u-col>
					<u-col span="7">
						<view v-if="info.maintenance_status===0" class="color-text-1">未维修保养</view>
						<view v-else class="color-text-3">已维修保养</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">原保险到期日期:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.insure_start_date}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">保险购买生效日期:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.insure_bug_date}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">保险购买状态:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.insurance_status==1?'已购买':'未购买'}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">保险到期日期:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.insure_end_date}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">保险金额(元):</view></u-col>
					<u-col span="7"><view class="black-text">{{info.insure_money}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">备注:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.remark}}</view></u-col>
				</u-row>
				
			</view>
		</view>
		<u-loading-page loading-mode="spinner" :loading="loadingText" loadingText="数据加载中" fontSize="16"></u-loading-page>
		<view class="common-bottom-view">
			<view class="common-btn" @click="back">返回</view>
		</view>
		<view class="common-zw"></view>
		<u-popup
		:show="showOilcard" 
		:round="8" 
		closeable 
		@close="showOilcard=false" 
		customStyle="height:60%"
		>
			<view class="wy-title">油卡充值记录</view>
			<scroll-view scroll-y="true" class="scroll-Y">
			<view class="wybox" v-for="(wyItem, wyIndex) of oilcard_records" :key="wyIndex">
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">充值编号:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.recharg_no}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">充值时间:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.recharg_time}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">油卡号:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.oilcard_no}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">充值金额(元):</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.recharg_money}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">车型:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.vehicle_model}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">车牌号:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.vehicle_number}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">经办人:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.handle_user_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">经办人部门:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.handle_dept_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:1px">
					<u-col span="5"><view class="wy-left-text">备注:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.remark}}</view></u-col>
				</u-row>
			</view>
			<view v-if="oilcard_records.length===0" style="padding:15px;"><u-empty mode="data" :icon="(imgUrl+'/wx/empty_data_icon.png')"></u-empty></view>
			</scroll-view>
		</u-popup>
		
		<u-popup
		:show="showVehicle" 
		:round="8" 
		closeable 
		@close="showVehicle=false" 
		customStyle="height:60%"
		>
			<view class="wy-title">车辆预约记录</view>
			<scroll-view scroll-y="true" class="scroll-Y">
			<view class="wybox" v-for="(wyItem, wyIndex) of vehicle_records" :key="wyIndex">
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">预约单号:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.reserve_no}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">用车部门:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.dept_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">预约人:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.customer_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">客户电话:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.customer_phone}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">乘车人数:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.num}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">用车性质:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.user_nature==10?'出差':'客户接待'}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">开始时间:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.start_time}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">结束时间:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.end_time}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">出发地:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.start_address}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">目的地:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.end_address}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:1px">
					<u-col span="5"><view class="wy-left-text">司机:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.dirver}}</view></u-col>
				</u-row>
			</view>
			<view v-if="vehicle_records.length===0" style="padding:15px;"><u-empty mode="data" :icon="(imgUrl+'/wx/empty_data_icon.png')"></u-empty></view>
			</scroll-view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				vehicle_id:'',
				triggered:false,
				loadingText:false,
				info:[],
				showVehicle:false,
				vehicle_records:[],
				showOilcard:false,
				oilcard_records:[],
			}
		},
		onShow(){
			
		},
		onLoad(opts){
			if(opts.vehicle_id){
				this.vehicle_id=opts.vehicle_id
				this.queryListInfo(true)
			}
		},
		methods: {
			oilcardOpen(items){
				this.showOilcard=true;
				this.oilcard_records=items;
			},
			vehicleOpen(items){
				this.showVehicle=true;
				this.vehicle_records=items;
			},
            back(){
            	uni.navigateBack()
            },
			pullDownRefresh(){
				if(this.triggered){
					return;
				}
				this.triggered = true;
				this.queryListInfo(true)
			},
			stopRefresh(){
				setTimeout(()=>{
					this.triggered = false;
					console.log('stop')
				}, 500)
			},
			
			async queryListInfo(flag) {
				this.loadingText=true;
				this.$api.get_campusVehicleData_getCampusVehicleDetail(this.vehicle_id).then((res)=>{
					console.log(res)
					this.info=res.campusVehicleData_getCampusVehicle;
					this.loadingText=false;
				});
				this.stopRefresh();
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	background:#F8F8F8;
}
.estate-box{
	background:#FFFFFF;
	padding:10px 10px 10px 10px;
	margin:10px;
	border-radius:6px;
	font-size:28rpx;
}
.danhao-text{
	font-size:32rpx;
	font-weight:bold;
}
.grey-text{
	color:#999999;
}
.black-text{
	padding-left:5px;
}
.color-text-1{
	padding-left:5px;
	color:#59A0FF;
}
.color-text-2{
	padding-left:5px;
	color:#0660FF;
}
.color-text-3{
	padding-left:5px;
	color:#000000;
}
.color-text-4{
	padding-left:5px;
	color:#ff0000;
}
.wy-title{
	text-align: center;
	font-size:18px;
	padding:15px 0 15px 0;
	border-bottom:1px solid #f1f1f1;
	font-weight:bold;
	background-color:#f1f1f1;
	border-radius:8px 8px 0 0;
}
.wybox{
	padding:15px;
	margin:15px;
	background-color:#f8f8f8;
	font-size:28rpx;
	border-radius:8px;
}
.wy-left-text{
	color:#999999;
}
.wy-right-text{
	color:#000000;
	margin-left:5px;
}
.scroll-Y{
	max-height:60vh;
}
</style>